<template>
  <div class="btns">
    <h3 class="title">新增角色</h3>
    <el-divider></el-divider>
    <el-form ref="roleFormRef" :rules="rules" :model="roleData" label-width="90px">
      <el-form-item label="名称" prop="cname">
        <el-input size="mini" style="width: 200px" v-model="roleData.cname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标识" prop="ename">
        <el-input size="mini" style="width: 200px" v-model="roleData.ename" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="saveRole">立即添加新角色</el-button>
        <el-button size="mini">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
//引入接口
import { addRoleApi } from '@/api/roleApi'
export default {
  props: ['page', 'loadData'],

  data() {
    return {
      roleData: {
        cname: '',
        ename: ''
      },
      rules: {
        cname: [{ required: true, whitespace: true, message: '名称不能为空' }],
        ename: [{ required: true, whitespace: true, message: '标识不能为空' }]
      }
    }
  },
  methods: {
    //添加新数据
    saveRole() {
      this.$refs.roleFormRef.validate(async valid => {
        if (valid) {
          let ret =await addRoleApi(this.roleData)
          if(ret.code===0){       //通信成功
            await this.loadData(this.page)   //调用该页的数据
            this.$refs.roleFormRef.resetFields()    //重置表单

          }
        }
      })
    }
  },
}
</script>


<style scoped>
.btns {
  padding: 10px;
  background: #fff;
  margin-top: 10px;

  .title {
    padding: 10px;
    font-size: 16px;
  }
}
.el-form {
  margin-top: 10px;
}
</style>